<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .imgBox {
      margin: 1000px auto;
      width: 800px;
      overflow: hidden;
      background-color: #888;
    }

    .imgBox img {
      width: 100%;
      vertical-align: middle;
    }
  </style>
</head>

<body>
  <div class="imgBox">
    <img src="" data-img="https://www.itcast.cn/images/newslide/homepageandphone/20224109184146299.jpg" alt="">
  </div>
  <script>
    const oImg = document.querySelector('img');

    window.addEventListener('scroll', function () {
      // 【图片底边】到【页面顶端】的距离
      /* const iImgTop = oImg.offsetHeight + oImg.offsetTop;
      // 【页面底边】到【页面顶端】的距离
      const iWinTop = document.documentElement.clientHeight + document.documentElement.scrollTop;
      if (iWinTop >= iImgTop) oImg.src = oImg.dataset.img */

      // 图片距离窗口数值
      // 可视区文档的高度
      if (oImg.getBoundingClientRect().top <= document.documentElement.clientHeight) oImg.src = oImg.dataset.img
    })

    // 如果【图片距离窗口数值】小于等于【可视区文档的高度】，就把图片上装地址的某个属性给图片真正的 src 属性
  </script>
</body>

</html>